<template>
  <div class="vue-main-page">
    <div class="main-header">
      <text class="main-header-text-h1">欢迎首次进入周边</text>
      <text class="main-header-text-h2">周边为您提供线下商家精准查询，关注商家促销信息</text>
    </div>
    <button class="select-address-btn" @click="reLocation">请选择地址</button>

    <text class="select-address-desc">确定固定地址，2KM内的商家的促销信息将会推送给您</text>
    <text class="main-header-h2">当前地址</text>

    <div class="current-location-address-container">
      <text class="current-location-address-text-left">{{location}}</text>
      <text class="current-location-address-text-right" @click.stop="reLocation">重新定位</text>
    </div>

    <button class="confirm-current-location" @click="confirmLocation">确认地址</button>
  </div>
</template>

<script>
  import { QQMapWX } from "../../utils/map";

  var qqmapSd = new QQMapWX({
    key: "DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ"
  });
  export default {
    name: "index",
//必须是一个函数
    data: function() {
      return {
        location: ""
      };
    },
//应该把复杂计算属性分割为尽可能多的更简单的属性。
    computed: {

      basePrice: function() {

      },
      discount: function() {

      },
      finalPrice: function() {

      }
    },
//组件专用,调用上层组件事件$`emit('input', $`event.target.value)
    props: {
      todo: {
        type: Object,
        required: true
      }
    },
    methods: {
      reLocation() {
        wx.chooseLocation({
          success: (res) => {
            console.log(res);
            this.location = res.name;
          },
          fail: (error) => {
            console.log(error);
          }
        });
      },
      confirmLocation() {
        wx.showToast({
          title: "正在上报"
        });
      }

    },
    onLoad() {
      wx.getLocation({
        type: "gcj02",
        success: (res) => {
          qqmapSd.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success: (res) => {
              this.location = res.result.formatted_addresses.recommend;
            }

          });
        }
      });
    }

  };
</script>

<style scoped>

  .vue-main-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .main-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #b1b1b1;
    height: 200rpx;
  }

  .main-header-text-h1 {
    color: black;
    font-size: 18px;
  }

  .main-header-text-h2 {
    color: #373536;
    font-size: 13px;
    margin-top: 12rpx;
  }

  .select-address-btn {
    width: 100%;
    height: 100rpx;
    margin: 15rpx;
  }

  .main-header-h2 {
    width: 100%;
    background-color: #b1b1b1;
    color: #5f5f5f;
    height: 70rpx;
    font-size: 15px;
    line-height: 70rpx;
    padding-left: 15rpx;
    margin-top: 15rpx;
  }

  .select-address-desc {
    color: #373536;
    font-size: 13px;
  }

  .current-location-address-container {
    display: flex;
    justify-content: space-between;
    padding: 13rpx;

  }

  .current-location-address-text-left {
    color: royalblue;
    font-size: 12px;
  }

  .current-location-address-text-right {
    color: royalblue;
    font-size: 12px;
  }

  .confirm-current-location {
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin-top: 35rpx;
  }

</style>
